<template>
  <div class="card" @click="goDetail">
    <div class="tit" v-html="rep(data.title,par)"></div>
    <el-tag size="small" style="margin-top: 10px">{{ data.colName}}</el-tag>
    <div class="content" v-html="repC(data.content,par)"></div>
    <div class="margin">创建时间：{{data.startTime}} 结束时间：{{data.endTime}}</div>
<!--    <div v-html="data.content" style="font-size: 12px"></div>-->
  </div>
</template>

<script>
import Vue from "vue";

export default {
  name: "cardItems",
  props:{
    data:{},
    par:''
  },
  methods:{
    goDetail(){
      let routeData = this.$router.resolve({
        name:'detail',query:{id:this.data.id}
      })
      window.open(routeData.href, '_blank')
    },
    rep(value,search) {
      if (value && value.length > 0) {
        const reg = `/${search}/g`;
        value = value.replace(
            eval(reg),
            "<span style='color: red;'>" + search + "</span>"
        );
        return value
      }
      //return null
    },
    repC(value,search) {
      if (!value) return ''
      value = value.toString().replace(/<[^>]+>|&[^>]+;/g, "")
      if (value.length > 550) {
        value = value.slice(0, 550) + "...";
      }
      if (value && value.length > 0) {
        const reg = `/${search}/g`;
        value = value.replace(
            eval(reg),
            "<span style='color: red;'>" + search + "</span>"
        );
        return value
      }
      //return null
    }
  },
}
</script>

<style scoped lang="less">
.margin{
  margin-top: 20px;
}
.card{
  width:80vw;
  //height: 20rem;
  background: #fff;
  border-radius: 3px;
  margin-bottom: 20px;
  padding: 20px;
  font-size: 16px;
  .tit{
    font-size: 18px;
    //line-height: 30px;
  }
}

.content{
  /deep/ img{
    display: none!important;
  }
  font-size: 16px;
  line-height: 23px;
  margin-top: 10px;
  min-height: 120px;
}
</style>
